<template>
  <hyb-page title="服务列表">

    <template v-slot:top>
      <view class="gui-bg-gray">
        <view class="gui-dark-bg-level-3 gui-padding">
          <hyb-switch-navigation :currentIndex="currentIndex" :items="cates" :keys="['xt_thumb','xt_name']"
            @change="navChange"></hyb-switch-navigation>
        </view>

        <view class="gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-nowrap gui-align-items-center"
          slot="gFixedTop" id="fixed-top-view">

          <!-- <view class="graceSelectMenuItem gui-flex1 gui-padding-small  gui-flex gui-align-items-center">
            <hyb-city :onlyRegion="true" @change="changeCity" v-model="district" :input-class="['gui-text-right']"></hyb-city>
          </view> -->
          <view class="graceSelectMenuItem gui-flex1">
            <gui-order @change="priceOrder" :orderBy="orderByIndex" :limit="[1,2]">
              <text class="gui-text gui-block"
                :class="[orderIndex == 2? 'gui-color-red' : 'gui-primary-text']">价格</text>
            </gui-order>
          </view>

          <view class="graceSelectMenuItem gui-flex1">
            <gui-select-menu :items="selectMenu1" @select="select1"></gui-select-menu>
          </view>
        </view>
      </view>
    </template>

    <template v-slot:body>
      <view style="height: 300rpx;"></view>
      <navigator :url="'../detail/detail?id=' + item.x_id + '&g_lbt_cc=' +item.g_lbt_cc"
        v-for="(item,index) in list" :key="index">
        <view class="gui-list-items gui-bg-white gui-padding gui-border-b">
          <!-- 修改这里的样式，添加 border-radius 属性 -->
          <gui-image width="200" height="200" mode="aspectFit" :src="item.x_thumb" class="rounded-image"></gui-image>
          <view class="gui-list-body">
            <view class="gui-list-title">
              <text class="gui-list-title-text gui-primary-text gui-ellipsis">{{item.x_name}}</text>
              <text class="gui-list-title-desc gui-color-gray gui-flex-shrink0">{{item.distance}}</text>
            </view>
            <view class="gui-list-body-desc">
              <view class="gui-flex gui-row gui-nowrap gui-align-items-center">
                <view class="gui-flex-shrink0 gui-h6 gui-color-red gui-margin-top">
                  ￥{{item.x_jiage}}</view>
                <!-- <gui-tags :size="22" style="margin: 0;" :text="item.s_type"
                :customClass="['gui-bg-yellow','gui-color-black']"></gui-tags> -->
              </view>
            </view>

            <!-- <text class="gui-list-body-desc gui-color-gray gui-margin-top">距离:100km</text> -->
          </view>
          <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
        </view>
      </navigator>
    </template>

  </hyb-page>
</template>

<script>
  export default {
    data() {
      return {
        cid: 0,
        id: 0,
        cates: [],
        // 第 1 排序选择
        selectMenu1: ['排序', '销量高', '好评多', '上门快', '价格低'],
        // 默认颜色
        defColor: '#2B2E3D',
        // 选中颜色
        activeColor: '#FF0036',
        // 排序索引
        orderIndex: 0,
        // 价格排序索引
        orderByIndex: 0,
        // 尺寸标签
        sizes: [{
            id: 0,
            text: "30 cm",
            checked: false
          },
          {
            id: 1,
            text: "50 cm",
            checked: false
          },
          {
            id: 2,
            text: "60 cm",
            checked: false
          },
          {
            id: 3,
            text: "70 cm",
            checked: false
          },
          {
            id: 4,
            text: "80 cm",
            checked: false
          },
          {
            id: 4,
            text: "90 cm",
            checked: false
          }
        ],
        list: [],
        page: 1,
        currentIndex: 0,
        district: "",
        page: 1,
        last_page: 1
      }
    },

    onReachBottom() {
      if (this.last_page > this.page) {
        this.page++
        this.query()
      }
    },

    onLoad(options) {

      this.district = options.district || ""

      this.cid = options.cid || 0;
      this.id = options.id || 0;

      uni.gPost("fuwu/type/list", {
        xt_parentid: this.cid
      }).then((list) => {
        this.cates = list;
        if (this.id > 0) {
          let that = this;
          list.forEach((item, index) => {
            if (item.xt_id == that.id) {
              that.currentIndex = index;
              return true;
            }
          })
        }
      })
      this.query();
    },


    methods: {
      changeCity() {
        this.query(1)
      },
      navChange(index) {
        this.id = this.cates[index].xt_id;
        this.query(1);
      },
      query(page) {
        if (page) this.page = page;
        if (this.page == 1) {
          this.list = [];
        }
        uni.gPost("fuwu/list", {
          district: this.district,
          x_parenttype: this.cid,
          x_type: this.id,
          page: this.page
        }).then((res) => {
          this.last_page = res.last_page
          this.list = this.list.concat(res.data);
        })
      }
    }
  }
</script>

<style>
  /* 自定义吸顶元素样式 */
  .fixed-top-view {
      height: 100rpx;
    }

  .graceSelectMenuItem {
      width: 180rpx;
    }

  .price-input {
      width: 120rpx;
      padding: 10rpx 0;
      border-radius: 5rpx;
      text-align: center;
    }

  .right-area-footer {
      width: 580rpx;
      height: 100rpx;
    }

  .right-area-footer-btn {
      width: 290rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      text-align: center;
    }

  /* 添加新的样式类来设置圆角 */
  .rounded-image {
    border-radius: 10rpx; /* 你可以根据需要调整圆角的大小 */
  }
</style>